/**
 学生报名
*/
<template>
    <div>
        <div v-if="indexKey === 1">
            <condition-card
                @reset="reset"
                @search="onSubmit"
                label-position="right"
                label-width="150px"
            >
                <el-row :gutter="24" style="height: 50px">
                    <!-- 竞赛标题 -->
                    <el-col :span="8">
                        <el-form-item label="竞赛项目名称">
                            <el-input
                                v-model="queryForm.condition.projectName"
                                placeholder="请输入"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 学年  -->
                    <el-col :span="8">
                        <el-form-item label="年度" prop="year">
                            <el-date-picker
                                :placeholder="$t('scoringItemSetting.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.condition.year"
                                type="year"
                                value-format="yyyy"
                                format="yyyy"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- 竞赛开始时间 -->
                    <el-col :span="8">
                        <el-form-item label="报名开始时间" size="small">
                            <el-date-picker
                                :placeholder="$t('academicForum.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.condition.signStart"
                                :picker-options="pickerOptionsStart"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm"
                                format="yyyy-MM-dd HH:mm"
                            ></el-date-picker>
                        </el-form-item>
                        <!-- 竞赛结束时间 -->
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="报名结束时间" size="small">
                            <el-date-picker
                                :placeholder="$t('academicForum.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.condition.signEnd"
                                :picker-options="pickerOptionsEnd"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm"
                                format="yyyy-MM-dd HH:mm"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </condition-card>
            <el-card
                shadow="never"
                v-loading="loading"
                body-style="padding: 24px;"
                class="card-margin"
            >
                <h1 class="condition-title">{{ "竞赛申报列表" }}</h1>
                <!-- <div class="float-left associated-conditional-input">
                    <KeywordInput
                        v-model="queryForm.condition.projectNameOrId"
                        :placeholder="$t('academicForum.entryName')"
                        @enter="onSubmit"
                    />
                </div> -->
                <div class="edu-opertion-bar sub-title">
                    <div class="float-right" style="display: flex"></div>
                </div>
                <edu-table
                    :pagination="false"
                    :tooltipEffect="tooltipEffect"
                    :selection="false"
                    :order="false"
                    stripe
                    :data="dataList"
                    size="mini"
                    @selection-change="handleSelectionChange"
                >
                    <edu-table-column
                        label="竞赛项目名称"
                        prop="projectName"
                    ></edu-table-column>
                    <edu-table-column label="年度" prop="year"></edu-table-column>
                    <edu-table-column label="报名时间" prop="enrollTime"></edu-table-column>
                    <edu-table-column label="考试时间" prop="examTime"></edu-table-column>
                    <edu-table-column label="状态" prop="status">
                        <template slot-scope="props">
                            <span v-if="props.row.status == null">待报名</span>
                            <span v-if="props.row.status == 1">已报名</span>
                            <span v-if="props.row.status == 2">选拔中</span>
                            <span v-if="props.row.status == 3">选拔通过</span>
                            <span v-if="props.row.status == 4">已退出</span>
                            <span v-if="props.row.status == 5">选拔不通过</span>
                        </template>
                    </edu-table-column>
                    <edu-table-column :label="$t('academicForum.operate')" fit>
                        <template slot-scope="props">
                            <el-button
                                type="text"
                                @click="personal(props.row)"
                                v-if="(props.row.status == null || props.row.status == 4) && props.row.form == '0'"
                            >
                                {{ '我要报名' }}
                            </el-button>
                            <el-button
                                type="text"
                                v-if="(props.row.status == null || props.row.status == 4) && props.row.form == '1'"
                                @click="group(props.row)"
                            >
                                {{ '我要报名' }}
                            </el-button>
                            <el-button
                                type="text"
                                @click="cancelSign(props.row)"
                                v-if="props.row.status == 1 || props.row.status == 2 || props.row.status == 3"
                                :disabled="props.row.status == 4 || props.row.status == 5"
                            >
                                {{ '取消报名' }}
                            </el-button>
                            <el-button
                                type="text"
                                @click="btnPass(props.row)"
                                :disabled="props.row.examCardNo == null || props.row.disabledPrint"
                            >
                                {{ '打印准考证' }}
                            </el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float: right; margin-top: 10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>
            <edu-export-dialog
                :disabled="exportButton"
                :title="$t('message.prompt')"
                ref="downloadRef"
                :data="exportResult"
            ></edu-export-dialog>
        </div>
        <!-- 新增 -->
        <!-- <div v-if="indexKey === 2">
            <competitionListAdd
                @change-exam="changeExam"
                ref="addFinom"
                @change-add="changeAdd"
                :compile="compile"
                :dataList="dataListObj"
            ></competitionListAdd>
        </div> -->
        <!-- 个人报名 -->
        <div v-if="indexKey === 2">
            <individualRegistration
                @change-pre-exam="changePerExam"
                :compile="compile"
                :dataList="dataListObj"
            ></individualRegistration>
        </div>
        <!-- 团体报名 -->
        <div v-if="indexKey === 3">
            <groupRegistration
                @change-exam="changeExam"
                :compile="compile"
                :dataList="dataListObj"
            ></groupRegistration>
        </div>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import competitionListAdd from './competitionListAdd'
import individualRegistration from './individualRegistration'
import groupRegistration from './groupRegistration'
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent'
import mixin from 'common/src/mixins/index';
export default {
    mixins: [mixin],
    components: {
        competitionListAdd,
        individualRegistration,
        groupRegistration,
    },
    data() {
        return {
            indexKey: 1, // 面包屑
            currentime: '',
            fileList: [],
            fileFlag: true,
            title: '',
            compile: '',
            dataListObj: {},
            category: { category: 1 },
            addBtn: true,
            editBtn: true,
            auths: [],
            addflag: false,
            exportButton: false,
            exportResult: null,
            dataList: [],
            multipleSelection: [],
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    projectName: '',
                    year: '',
                    signStart: '',
                    signEnd: '',
                },
            },
            dataListProp: {},
            options: {
                title: [],
                sex: [],
            },
            pickerOptionsStart: {
                disabledDate: (time) => {
                    let endDateVal = this.queryForm.condition.signEnd
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime()
                    }
                },
            },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    let beginDateVal = this.queryForm.condition.signStart
                    if (beginDateVal) {
                        return time.getTime() <= new Date(beginDateVal).getTime() - 86400000
                    }
                },
            },
            id: '',
        }
    },
    watch: {
        auths: {
            handler: function (newVal) {
                if (newVal && Array.isArray(newVal) && newVal.length > 0) {
                    newVal.some((item) => {
                        if (item.authCode === 'academicForums-addBtn') {
                            // 新增
                            this.addBtn = true
                        }
                        if (item.authCode === 'academicForums-editBtn') {
                            // 编辑
                            this.editBtn = true
                        }
                        if (item.authCode === 'internshipDemand-detailsBtn') {
                            // 详情
                            this.detailsBtn = true
                        }
                        if (item.authCode === 'internshipDemand-deriveBtn') {
                            // 导出
                            this.deriveBtn = true
                        }
                        if (item.authCode === 'internshipDemand-removeBtn') {
                            // 删除
                            this.removeBtn = true
                        }
                    })
                }
            },
            deep: true,
            immediate: true,
        },
    },
    created() {
        let session = localStorage.getItem('sessiondata')
        session = JSON.parse(session)
        let user = session.mockUser || session.user
        this.queryForm.educationTag = user.currentManageDptId
        this.postApproveAgree(this.queryForm)
        if (localStorage.getItem('sessiondata')) {
            if (JSON.parse(localStorage.getItem('sessiondata')).auths) {
                this.auths = JSON.parse(localStorage.getItem('sessiondata')).auths
            }
        }
    },
    filters: {},
    mounted() {
        this.getOptions()
    },
    methods: {
        // 打印准考证
        btnPass(row) {
            let user = this.global.mockUser || this.global.user
            let params = {
                projectName: row.projectName,
                recordId: row.recordId,
                examStart: row.examStart,
                examEnd: row.examEnd,
                examCardNo: row.examCardNo,
                educationTag: row.educationTag,
                studentId: user.uid,
            }
            console.log(params, 'nlnh')
            comRegistration.printExamCard(params).then((res) => {
                this.$message.success(this.$t('internship.successfully'))
            })
        },

        // 个人报名
        personal(data) {
            comRegistration.getIsEnable(data).then((res) => {
                this.dataListObj = { ...res.data, ...data }
                this.indexKey = 2
            })
        },
        // 团体报名
        group(data) {
            comRegistration.getIsEnable(data).then((res) => {
                this.dataListObj = { ...res.data, ...data }
                this.indexKey = 3
            })
        },

        //取消报名
        cancelSign(data) {
            this.$delConfirm("确定取消报名?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                comRegistration.cancelSignUp(data).then((res) => {
                    this.postApproveAgree(this.queryForm)
                })
            })
        },

        // 查询列表
        postApproveAgree(date) {
            comRegistration.signUpList(date).then((res) => {
                comRegistration.getCurrentDateStr().then((resp) => {
                    let currentTimeStamp = new Date().getTime()
                    if (resp.code === 200) {
                        currentTimeStamp = new Date((resp.data).replace(/-/g, "/")).getTime()
                    }
                    this.queryForm.total_ = res.data.total_
                    this.dataList = res.data.list
                    this.dataList.forEach((value) => {
                        // 排考时间
                        // 当前时间大于排考时间三天则显示打印准考证按钮
                        if (value.arrangeFinish) {
                            let arrangeTimeStamp = new Date((value.arrangeFinish).replace(/-/g, "/")).getTime()
                            if (currentTimeStamp - arrangeTimeStamp >= 3 * 24 * 60 * 60 * 1000) {
                                value['disabledPrint'] = false
                            } else {
                                value['disabledPrint'] = true
                            }
                        } else {
                            value['disabledPrint'] = true
                        }
                    })
                })
            })
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE'],
            }
            queryDic(data).then((res) => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                        nationId: 'G_GJQU', // 国别/地区
                    },
                    res.data,
                    this.options
                )
            })
        },
        changeClick(val) {
            this.options.title.forEach((el) => {
                if (val === el.value) {
                    this.queryForm.condition.proTitle = el.label
                }
            })
        },

        // 搜索/筛选
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 重置
        reset() {
            for (let key in this.queryForm.condition) {
                this.queryForm.condition[key] = ''
            }
            this.fileList = []
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        // 保存
        conserve() {
            this.addflag = false
        },

        // 返回主页
        changeExam() {
            this.indexKey = 1
            this.multipleSelection = []
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        changePerExam(val) {
            this.indexKey = 1
            this.multipleSelection = []
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.postApproveAgree(this.queryForm)
        },
    },
}
</script>
<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.edu-page-title {
    span {
        line-height: 24px;
        display: inline-block;
        padding-right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #2b3b4e;
    }
}
.sub-title {
    margin: 16px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
.form-item {
    width: 312px;
    height: 32px;
    float: left;
    margin: 0px 10px;
}
.is-enabled-container ::v-deep {
    .el-button {
        cursor: auto;
    }
    .el-button--danger {
        padding: 9px 15px;
        min-width: 0;
    }
}
.inputBox {
    width: 240px !important;
    height: 32px !important;
}
.atooltip {
    background: beige;
    border: black;
}
</style>
